<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="false" :search="false" :cart-count="false" :line-step="true" step="1" />
      </div>
    </div>
    <div class="container-width">
      <div class="bgc-white cart-container mar-t-20 mar-b-20">
        <el-tabs v-model="activeName" class="tabs">
          <el-tab-pane :label="value" :name="key" v-for="(value,key) in crossBorderOrderTypeList">
            <cart-list :p-cross-border-order-type="key" v-if="activeName === key" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <right-nav-sticky />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import cartList from './components/cartList/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import rightNavSticky from '@/components/rightNavSticky/index.vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    getCrossBorderOrderTypeList
  } from '@/api/common/common'
  export default defineComponent({
    name: 'Cart',
    components: {
      headerLogin,
      logoBar,
      cartList,
      footerLinks,
      footerInfos,
      rightNavSticky
    },
    setup() {
      const router = useRouter()
      const activeName = ref('1')
      const crossBorderOrderTypeList = ref([])

      const storeState = useState('user', ['loginUserObj'])

      onMounted(() => {
        if (storeState.value && storeState.value.loginUserObj) {

        }
        initGetCrossBorderOrderTypeList()

      })

      const initGetCrossBorderOrderTypeList = () => {
        getCrossBorderOrderTypeList().then(response => {
          crossBorderOrderTypeList.value = response.data
          if (response.data) {
            for (let key in response.data) {
              activeName.value = key + ''
              break
            }
          }
        })
      }

      return {
        activeName,
        crossBorderOrderTypeList
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .cart-container {
    min-height: 500px;

    ::v-deep(.tabs) {
      .el-tabs__nav {
        padding: 0 0 0 27px;
      }

      .el-tabs__header {
        margin: 0 0 4px 0;
      }

      .el-tabs__item {
        text-align: center;
        color: #999999;
        position: relative;
        height: 62px;
        line-height: 62px;
        font-size: 16px;

        &:last-child {
          margin-left: 32px;
          margin-right: 0;
        }
      }

      .el-tabs__item.is-active {
        color: $darkBlue;
      }

      .el-tabs__active-bar {
        height: 3px;
        background-color: $darkBlue;
      }

      .el-tabs__nav-wrap::after {
        height: 1px;
        background-color: #f5f6fa;
      }
    }
  }
</style>
